
<%@ include file="../common/top.jsp"%>

<script type="text/javascript">
    $(function() {
        var $code = $("#code_image");
        $code.click(function() {
            this.src = "kaptcha.jpg?" + new Date().getTime(); // 使用 getTime() 方法获取当前时间的毫秒数
        });
    });
</script>


<style>
    .okTips{
        color:green;
    }
    .errorTips{
        color:red;
    }
</style>
<div id="Catalog" class="Catalog">
    <form action="register">
        <h3>User Information</h3>
        <c:if test="${requestScope.RegisterMsg !=null}">
            <p><font color="red">${requestScope.RegisterMsg}</font></p>
        </c:if>
        <table>
            <tr>
                <td>User ID:</td>
                <td>
                    <input name="userid" id="username" class="search-input" onblur="checkUsername();">
                    <span id="usernameTips"></span>
                </td>

            </tr>
            <tr>
                <td>New password:</td>
                <td>
                    <input type="password" name="password" class="search-input" id="password" onblur="checkPassword()">
                    <span id="passwordTips"></span>
                </td>

            </tr>
            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="password" name="repeatedPassword" id="repeatedPassword" class="search-input" onblur="checkPassword()" >
                    <span id="repeatedPasswordTips"></span>
                </td>

            </tr>
            <tr>
                <td>Verification code:</td>
                <td>
                    <input type="text" name="code" style="width: 60px" class="search-input">
                    <img id="code_image" style="width: 88px;height: 22px;position: absolute;+margin-top:1px;margin-left: 5px" src="kaptcha.jpg">
                </td>
            </tr>
        </table>

        <h3>Account Information</h3>
        <div style="display: flex; justify-content: center; align-items: center;">
            <table>
                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" name="account.firstName" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" name="account.lastName" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" size="40" name="account.email" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td>
                        <input type="text" name="account.phone" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td>
                        <input type="text" size="40" name="account.address1" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td>
                        <input type="text" size="40" name="account.address2" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td>
                        <input type="text" name="account.city" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                        <input type="text" size="4" name="account.state" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>
                        <input type="text" size="10" name="account.zip" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <input type="text" size="15" name="account.country" class="search-input">
                    </td>
                </tr>
            </table>

        </div>

        <h3>Profile Information</h3>

        <table>
            <tr>
                <td>Language Preference:</td>
                <td>
                    <input type="radio" name="account.languagePreference" value="english">English
                    <input type="radio" name="account.languagePreference" disabled="disabled">Chinese
                </td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td>
                    <input type="radio" name="account.favouriteCategoryId" value="CATS">CATS
                    <input type="radio" name="account.favouriteCategoryId" value="DOGS">DOGS
                    <input type="radio" name="account.favouriteCategoryId" value="FISH">FISH
                    <input type="radio" name="account.favouriteCategoryId" value="BIRDS">BIRDS
                    <input type="radio" name="account.favouriteCategoryId" value="REPTILES">REPTILES
                </td>
            </tr>
        </table>

        <%--<h3>Profile Information</h3>

        <table>
            <tr>
                <td>Language Preference:</td>
                <td><stripes:select name="account.languagePreference">
                    <stripes:options-collection collection="${actionBean.languages}" />
                </stripes:select></td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td>
                    <stripes:select name="account.favouriteCategoryId">
                    <stripes:options-collection collection="${actionBean.categories}" />
                </stripes:select></td>
            </tr>
            <tr>
                <td>Enable MyList</td>
                <td><stripes:checkbox name="account.listOption" /></td>
            </tr>
            <tr>
                <td>Enable MyBanner</td>
                <td><stripes:checkbox name="account.bannerOption" /></td>
            </tr>

        </table>--%>
        <%--<input type="submit" name="editAccount" id="reg_btn" value="Save Account Information">--%>
        <button type="submit" name="editAccount" class="btn">
            Save Account Information<i class="fa-solid fa-chevron-right"></i>
        </button>
    </form>

</div>
<script src="js/check.js"></script>
<%@ include file="../common/bottom.jsp"%>
